<template>
  <div class="hello">
    <!-- <Table
      :tableData=tableData 
      :columnData=columnData 
      :total=100
      @handleSizeChange=handleSizeChange 
      @handleCurrentChange=handleCurrentChange>
    </Table>-->
    <div style="width:700px;margin:0 auto">
      <Form :formData="formData" @submit="submit" @reset="reset" :formConfig={inline:true}></Form>
    </div>
  </div>
</template>

<script>
import Form from "@/components/common/form";
export default {
  name: "HelloWorld",
  data() {
    return {
      formData: [
        {
          name: "name",
          label: "姓名",
          value: "",
          type: "input",
          rules: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
          ]
        },
        {
          name: "region",
          label: "活动区域",
          value: "",
          type: "select",
          selectVal: [
            {
              label: "区域一",
              value: "shanghai"
            },
            {
              label: "区域二",
              value: "beijing"
            }
          ],
          rules: [
            { required: true, message: "请选择活动区域", trigger: "change" }
          ]
        },
        {
          name: "date1",
          value: "",
          label: "日期1",
          type: "date_picker",
          placeholder:'选择日期',
          rules: [
            {
              type: "date",
              required: true,
              message: "请选择日期",
              trigger: "change"
            }
          ]
        },
        {
          name: "time",
          value: "",
          label: "时间1",
          type: "time_picker",
          placeholder:'选择时间',
          rules: [
            {
              type: "date",
              required: true,
              message: "请选择时间",
              trigger: "change"
            }
          ]
        },
        {
          name: "delivery",
          label: "限时配送",
          value: false,
          type:'switch'
        },
        {
          name: "type",
          label: "活动性质",
          value: [],
          type:'checkbox',
          groups:[
            {
              label:'美食/餐厅线上活动',
              name:'type'
            },
            {
              label:'地推活动',
              name:'type'
            },
            {
              label:'线下主题活动',
              name:'type'
            },
            {
              label:'单纯品牌曝光',
              name:'type'
            },
          ],
          rules: [
            {
              type: "array",
              required: true,
              message: "请至少选择一个活动性质",
              trigger: "change"
            }
          ]
        },
        {
          name: "resource",
          label: "特殊资源",
          value: "",
          type:'radio',
          groups:[
            {
              label:'线上品牌商赞助'
            },
            {
              label:'线下场地免费'
            }
          ],
          rules: [
            { required: true, message: "请选择活动资源", trigger: "change" }
          ]
        },
        {
          name: "desc",
          label: "活动形式",
          value: "",
          type:'textarea',
          rules: [
            { required: true, message: "请填写活动形式", trigger: "blur" }
          ]
        }
      ]
    };
  },
  components: { Form },
  created() {
    this.$axios.get("Membercourse/getMyCourse").then(res => {
      console.log(res);
    });
  },
  methods: {
    handleSizeChange(e) {
      console.log(e);
    },
    handleCurrentChange(e) {
      console.log(e);
    },
    submit(e){
      console.log(e);
    },
    reset(e){
      console.log(e);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
